<div ng-controller="CrearPersonaNaturalController">
<form name="formCrearPersonanatural" ng-submit="crearTransaccion()" novalidate>
<alert ng-repeat="alert in alerts" type="{{alert.type}}" close="closeAlert($index)">
    <span ng-bind-html="alert.msg"></span>
</alert>
<fieldset>
<legend style="text-align: center;">Registrar Persona Natural</legend>
<legend style="background: whitesmoke;">Datos Personales</legend>
<h6 style="color: brown;">Los campos marcados con (*) son obligatorios</h6>
<div class="row">
<div class="col-sm-4">
    <div class="row">
        <div class="col-sm-12">
            <div class="panel panel-default">
                <div class="panel-body">
                    <img src="https://ssl.gstatic.com/accounts/ui/avatar_2x.png" class="img-circle center-block" style="max-width: 105px; max-height: 105px;">
                </div>
            </div>
        </div>
    </div>
    <div class="row">
        <div class="col-sm-12">
            <div class="panel panel-default">
                <div class="panel-body">
                    <img src="https://ssl.gstatic.com/accounts/ui/avatar_2x.png" class="img-thumbnail center-block" style="max-width: 200px; max-height: 100px;">
                </div>
            </div>
        </div>
    </div>
</div>
<div class="col-sm-8">
    <div class="row">
        <div class="col-sm-6">
            <div class="form-group" ng-class="{ 'has-error' : formCrearPersonanatural.pais.$invalid && (control.submitted || formCrearPersonanatural.pais.$dirty)}">
                <label>Nacionalidad </label>
                <label style="color: brown;">(*)</label>
                <div class="input-group">
                    <span ng-bind="view.codigoPais" class="input-group-addon"></span>
                    <select focus-on="focusPais" name="pais" ng-options="pais.abreviatura as pais.denominacion for pais in combo.paises" ng-model="view.codigoPais" class="form-control" required autofocus>
                    	<option value="">--Seleccione--</option>
                    </select>
                </div>
                <div ng-show="formCrearPersonanatural.pais.$invalid && (control.submitted || formCrearPersonanatural.pais.$dirty)">
                    <p class="help-block" ng-show="formCrearPersonanatural.pais.$error.required">
                        Seleccione Nacionalidad.
                    </p>
                </div>
            </div>
        </div>
    </div>
    <div class="row">
        <div class="col-sm-6">
            <div class="form-group" ng-class="{ 'has-error' : formCrearPersonanatural.tipoDocumento.$invalid && (control.submitted || formCrearPersonanatural.tipoDocumento.$dirty)}">
                <label>Tipo Documento</label>
                <label style="color: brown;">(*)</label>
                <select name="tipoDocumento" ng-options="tipodocumento.id as tipodocumento.abreviatura for tipodocumento in combo.tipoDocumentos | orderBy : 'id'" ng-model="view.idTipoDocumento" class="form-control" required>
                	<option value="">--Seleccione--</option>
                </select>
                <div ng-show="formCrearPersonanatural.tipoDocumento.$invalid && (control.submitted || formCrearPersonanatural.tipoDocumento.$dirty)">
                    <p class="help-block" ng-show="formCrearPersonanatural.tipoDocumento.$error.required">
                        Seleccione Tipo Documento.
                    </p>
                </div>
            </div>
        </div>
        <div class="col-sm-6">
            <div class="form-group" ng-class="{ 'has-error' : (control.errorForm.numeroDocumento || formCrearPersonanatural.numeroDocumento.$invalid) && (control.submitted || formCrearPersonanatural.numeroDocumento.$dirty)}">
                <label>N&uacute;mero Documento</label>
                <label style="color: brown;">(*)</label>
                <input name="numeroDocumento" type="text" ng-model="view.numeroDocumento" ng-pattern="/^[0-9]+$/" ng-minlength="1" ng-maxlength="20" class="form-control" placeholder="N&uacute;mero Documento" required/>
                <div ng-show="formCrearPersonanatural.numeroDocumento.$invalid && (control.submitted || formCrearPersonanatural.numeroDocumento.$dirty)">
                    <p class="help-block" ng-show="formCrearPersonanatural.numeroDocumento.$error.required">
                        Ingrese Numero de Documento.
                    </p>
                    <p class="help-block" ng-show="formCrearPersonanatural.numeroDocumento.$error.minlength">
                        Minimo 1 Caracter.
                    </p>
                    <p class="help-block" ng-show="formCrearPersonanatural.numeroDocumento.$error.maxlength">
                        Maximo 20 Caracteres.
                    </p>
                    <p class="help-block" ng-show="formCrearPersonanatural.numeroDocumento.$error.pattern">
                        Numero de documento no valido.
                    </p>
                    <p class="help-block" ng-show="formCrearPersonanatural.numeroDocumento.$error.sgmaxlength">
                        Debe tener <span ng-bind="getTipoDocumento().numeroCaracteres"></span> caracteres.
                    </p>
                </div>
                <div ng-show="control.errorForm.numeroDocumento && control.submitted">
                    <p class="help-block" ng-show="control.errorForm.numeroDocumento">
                        Maximo <span ng-bind="persona.tipoDocumento.numeroCaracteres"></span> caracteres.
                    </p>
                </div>
            </div>
        </div>
    </div>
    <div class="row">
        <div class="col-sm-6">
            <div class="form-group" ng-class="{ 'has-error' : formCrearPersonanatural.apellidoPaterno.$invalid && (control.submitted || formCrearPersonanatural.apellidoPaterno.$dirty)}">
                <label>Apellido Paterno</label>
                <label style="color: brown;">(*)</label>
                <input name="apellidoPaterno" type="text" ng-model="view.apellidoPaterno" ng-minlength="1" ng-maxlength="60" class="form-control" placeholder="Apellido Paterno" capitalize required/>
                <div ng-show="formCrearPersonanatural.apellidoPaterno.$invalid && (control.submitted || formCrearPersonanatural.apellidoPaterno.$dirty)">
                    <p class="help-block" ng-show="formCrearPersonanatural.apellidoPaterno.$error.required">
                        Ingrese Apellido Paterno.
                    </p>
                    <p class="help-block" ng-show="formCrearPersonanatural.apellidoPaterno.$error.minlength">
                        Minimo 1 Caracter.
                    </p>
                    <p class="help-block" ng-show="formCrearPersonanatural.apellidoPaterno.$error.maxlength">
                        Maximo 60 Caracteres.
                    </p>
                </div>
            </div>
        </div>
        <div class="col-sm-6">
            <div class="form-group" ng-class="{ 'has-error' : formCrearPersonanatural.apellidoMaterno.$invalid && (control.submitted || formCrearPersonanatural.apellidoMaterno.$dirty)}">
                <label>Apellido Materno</label>
                <label style="color: brown;">(*)</label>
                <input name="apellidoMaterno" type="text" ng-model="view.apellidoMaterno" ng-minlength="1" ng-maxlength="60" class="form-control" placeholder="Apellido Materno" capitalize required/>
                <div ng-show="formCrearPersonanatural.apellidoMaterno.$invalid && (control.submitted || formCrearPersonanatural.apellidoMaterno.$dirty)">
                    <p class="help-block" ng-show="formCrearPersonanatural.apellidoMaterno.$error.required">
                        Ingrese Apellido Materno.
                    </p>
                    <p class="help-block" ng-show="formCrearPersonanatural.apellidoMaterno.$error.minlength">
                        Minimo 1 Caracter.
                    </p>
                    <p class="help-block" ng-show="formCrearPersonanatural.apellidoMaterno.$error.maxlength">
                        Maximo 60 Caracteres.
                    </p>
                </div>
            </div>
        </div>
    </div>
    <div class="row">
        <div class="col-sm-6">
            <div class="form-group" ng-class="{ 'has-error' : formCrearPersonanatural.nombres.$invalid && (control.submitted || formCrearPersonanatural.nombres.$dirty)}">
                <label>Nombres</label>
                <label style="color: brown;">(*)</label>
                <input name="nombres" type="text" ng-model="view.nombres" ng-minlength="1" ng-maxlength="70" class="form-control" placeholder="Nombres" capitalize required  />
                <div ng-show="formCrearPersonanatural.nombres.$invalid && (control.submitted || formCrearPersonanatural.nombres.$dirty)">
                    <p class="help-block" ng-show="formCrearPersonanatural.nombres.$error.required">
                        Ingrese Nombres.
                    </p>
                    <p class="help-block" ng-show="formCrearPersonanatural.nombres.$error.minlength">
                        Minimo 1 Caracter.
                    </p>
                    <p class="help-block" ng-show="formCrearPersonanatural.nombres.$error.maxlength">
                        Maximo 70 Caracteres.
                    </p>
                </div>
            </div>
        </div>
        <div class="col-sm-6">
            <div class="form-group" ng-class="{ 'has-error' : formCrearPersonanatural.fechanacimiento.$invalid && control.submitted}">
                <label>Fecha Nacimiento</label>
                <label style="color: brown;">(*)</label>
                <div class="input-group">
                    <input type="text" name="fechanacimiento" class="form-control" datepicker-popup="dd/MM/yyyy" ng-model="view.fechaNacimiento" is-open="opened" min-date="dateRange.minDate" max-date="dateRange.maxDate" datepicker-options="dateOptions" ng-required="true" close-text="Close" required="required">
                    <span class="input-group-btn">
                        <button class="btn btn-default" type="button" ng-click="open($event)">
                            <span class="glyphicon glyphicon-calendar"></span>
                        </button>
                    </span>
                </div>
                <div ng-show="formCrearPersonanatural.fechanacimiento.$invalid && control.submitted">
                    <p class="help-block" ng-show="formCrearPersonanatural.fechanacimiento.$error">
                        Ingrese Fecha Valida.
                    </p>
                    <p class="help-block" ng-show="formCrearPersonanatural.fechanacimiento.$invalid">
                        Fecha no Valida.
                    </p>
                </div>
            </div>
        </div>
    </div>
    <div class="row">
        <div class="col-sm-6">
            <div class="form-group" ng-class="{ 'has-error' : formCrearPersonanatural.sexo.$invalid && control.submitted}">
                <label>Sexo</label>
                <label style="color: brown;">(*)</label>
                <select name="sexo" ng-options="sexo as sexo for sexo in combo.sexos" ng-model="view.sexo" class="form-control" required>
                	<option value="">--Seleccione--</option>
                </select>
                <div ng-show="formCrearPersonanatural.sexo.$invalid && control.submitted">
                    <p class="help-block" ng-show="formCrearPersonanatural.sexo.$error.required">
                        Seleccione Sexo.
                    </p>
                </div>
            </div>
        </div>
        <div class="col-sm-6">
            <div class="form-group" ng-class="{ 'has-error' : formCrearPersonanatural.estadocivil.$invalid && formCrearPersonanatural.submitted}">
                <label>Estado Civil</label>
                <select name="estadocivil" ng-options="estadocivil as estadocivil for estadocivil in combo.estadosCiviles" ng-model="view.estadoCivil" class="form-control">
                	<option value="">--Seleccione--</option>
                </select>
                <div ng-show="formCrearPersonanatural.estadocivil.$invalid && control.submitted">
                    <p class="help-block" ng-show="formCrearPersonanatural.estadocivil.$invalid">
                        Estado Civil Invalido.
                    </p>
                </div>
            </div>
        </div>
    </div>

</div>
</div>
</fieldset>
<fieldset>
    <legend style="background: whitesmoke;">Datos Adicionales</legend>
    <div class="row" ng-controller="UbigeoController">
        <div class="col-sm-4">
            <div class="form-group" ng-class="{ 'has-error' : formCrearPersonanatural.departamento.$invalid && control.submitted}">
                <label>Departamento</label>
                <select name="departamento" ng-options="departamento.codigo as departamento.denominacion for departamento in combos.departamentos" ng-model="ubigeo.codigoDepartamento" ng-change="changeDepartamento()" class="form-control">
                	<option value="">--Seleccione--</option>
                </select>
                <div ng-show="formCrearPersonanatural.departamento.$invalid && control.submitted">
                    <p class="help-block" ng-show="formCrearPersonanatural.departamento.$error.required">
                        Ingrese Departamento.
                    </p>
                </div>
            </div>
        </div>
        <div class="col-sm-4">
            <div class="form-group" ng-class="{ 'has-error' : formCrearPersonanatural.provincia.$invalid && control.submitted}">
                <label>Provincia</label>
                <select name="provincia" ng-options="provincia.codigo as provincia.denominacion for provincia in combos.provincias" ng-model="ubigeo.codigoProvincia" ng-change="changeProvincia()" class="form-control">
                	<option value="">--Seleccione--</option>
                </select>
                <div ng-show="formCrearPersonanatural.provincia.$invalid && control.submitted">
                    <p class="help-block" ng-show="formCrearPersonanatural.provincia.$error.required">
                        Ingrese Provincia.
                    </p>
                </div>
            </div>
        </div>
        <div class="col-sm-4">
            <div class="form-group" ng-class="{ 'has-error' : formCrearPersonanatural.distrito.$invalid && control.submitted}">
                <label>Distrito</label>
                <select name="distrito" ng-options="distrito.codigo as distrito.denominacion for distrito in combos.distritos" ng-model="ubigeo.codigoDistrito" ng-change="changeDistrito()" class="form-control">
                	<option value="">--Seleccione--</option>
                </select>
                <div ng-show="formCrearPersonanatural.distrito.$invalid && control.submitted">
                    <p class="help-block" ng-show="formCrearPersonanatural.distrito.$error.required">
                        Ingrese Distrito.
                    </p>
                </div>
            </div>
        </div>
    </div>
    <div class="row">
        <div class="col-sm-4">
            <div class="form-group" ng-class="{ 'has-error' : formCrearPersonanatural.direccion.$invalid && control.submitted}">
                <label>Direcci&oacute;n</label>
                <input name="direccion" type="text" ng-model="view.direccion" ng-maxlength="70" class="form-control" placeholder="Direcci&oacute;n" capitalize />
                <div ng-show="formCrearPersonanatural.direccion.$invalid && control.submitted">
                    <p class="help-block" ng-show="formCrearPersonanatural.direccion.$error.maxlength">
                        Maximo 70 Caracteres.
                    </p>
                </div>
            </div>
        </div>
        <div class="col-sm-4">
            <div class="form-group" ng-class="{ 'has-error' : formCrearPersonanatural.referencia.$invalid && control.submitted}">
                <label>Referencia</label>
                <input name="referencia" type="text" ng-model="view.referencia" ng-maxlength="70" class="form-control" placeholder="Referencia" capitalize />
                <div ng-show="formCrearPersonanatural.referencia.$invalid && control.submitted">
                    <p class="help-block" ng-show="formCrearPersonanatural.referencia.$error.maxlength">
                        Maximo 70 Caracteres.
                    </p>
                </div>
            </div>
        </div>
        <div class="col-sm-4">
            <div class="form-group" ng-class="{ 'has-error' : formCrearPersonanatural.ocupacion.$invalid && control.submitted}">
                <label>Ocupaci&oacute;n</label>
                <input name="ocupacion" type="text" ng-model="view.ocupacion" ng-maxlength="70" class="form-control" placeholder="Ocupaci&oacute;n" capitalize />
                <div ng-show="formCrearPersonanatural.nombres.$invalid && control.submitted">
                    <p class="help-block" ng-show="formCrearPersonanatural.ocupacion.$error.maxlength">
                        Maximo 70 Caracteres.
                    </p>
                </div>
            </div>
        </div>
    </div>
    <div class="row">
        <div class="col-sm-4">
            <div class="form-group" ng-class="{ 'has-error' : formCrearPersonanatural.telefono.$invalid && control.submitted}">
                <label>Telefono</label>
                <input name="telefono" type="text" ng-model="view.telefono" ng-maxlength="70" class="form-control" placeholder="Telefono" />
                <div ng-show="formCrearPersonanatural.telefono.$invalid && control.submitted">
                    <p class="help-block" ng-show="formCrearPersonanatural.telefono.$error.maxlength">
                        Maximo 70 Caracteres.
                    </p>
                </div>
            </div>
        </div>
        <div class="col-sm-4">
            <div class="form-group" ng-class="{ 'has-error' : formCrearPersonanatural.celular.$invalid && control.submitted}">
                <label>Celular</label>
                <input name="celular" type="text" ng-model="view.celular" ng-maxlength="70" class="form-control" placeholder="Celular" />
                <div ng-show="formCrearPersonanatural.celular.$invalid && control.submitted">
                    <p class="help-block" ng-show="formCrearPersonanatural.celular.$error.maxlength">
                        Maximo 70 Caracteres.
                    </p>
                </div>
            </div>
        </div>
        <div class="col-sm-4">
            <div class="form-group" ng-class="{ 'has-error' : formCrearPersonanatural.email.$invalid && control.submitted}">
                <label>Email</label>
                <input name="email" type="email" ng-model="view.email" ng-maxlength="70" class="form-control" placeholder="correo@dominio.com"/>
                <div ng-show="formCrearPersonanatural.email.$invalid && control.submitted">
                    <p class="help-block" ng-show="formCrearPersonanatural.email.$invalid">
                        Email Incorrecto.
                    </p>
                    <p class="help-block" ng-show="formCrearPersonanatural.email.$error.maxlength">
                        Maximo 70 Caracteres.
                    </p>
                </div>
            </div>
        </div>
    </div>
</fieldset>
<button type="submit" class="btn btn-primary" ng-disabled="buttonDisableState()">Guardar</button>
<button type="button" class="btn btn-default" ng-click="cancel()">Cancelar</button>
</form>
</div>

